<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content sDemand-details sDemand-details-upload">
		<div class="sDemand-details-cont sDemand-details-upload-cont">
			<ul class="mui-table-view sDemand-details-upload-contul">
				<li class="sDemand-details-li-state sDemand-details-upload-li-state">
					<p class="sDemand-details-state">{{ data.statusText }}</p>
				</li>
		        <li>
		           <p class="sDemand-details-num">波&nbsp;&nbsp;&nbsp;段&nbsp;&nbsp;&nbsp;&nbsp;号:</p>
				   <p class="sDemand-details-an">{{ data.bandname }}</p>
		        </li>
		        <!-- <li>
		           <p class="sDemand-details-num">供应商编号:</p>
				   <p class="sDemand-details-an">{{ data.supplierid }}</p>
		        </li>
		       <li>
		           <p class="sDemand-details-num">供应商名称:</p>
				   <p class="sDemand-details-an">{{data.vendername}}</p>
		        </li> -->
				<li>
		           <p class="sDemand-details-num">供应商编号:</p>
				   <p class="sDemand-details-an">{{ login_user.venderInfo.Id }}</p>
		        </li>
		       	<li>
		           <p class="sDemand-details-num">供应商名称:</p>
				   <p class="sDemand-details-an">{{ login_user.venderInfo.Name }}</p>
		        </li>
		        <li  class="sDemand-details-select">
		        	<a class="mui-icon iconfont icon-arrowleft"></a>
		           <p class="sDemand-details-num">大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:</p>
				   <span>{{ data.dlText }}</span>
				   <!-- <span style="font-size: 1.4rem;" @click="showPicker = true">{{ defaultData[0].text }}  {{ defaultData[1].text }}</span> -->
		        </li>
				 <li  class="sDemand-details-select">
		        	<a class="mui-icon iconfont icon-arrowleft"></a>
		           <p class="sDemand-details-num">小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:</p>
				   <span>{{ data.xlText }}</span>
				   <!-- <span style="font-size: 1.4rem;" @click="showPicker = true">{{ defaultData[0].text }}  {{ defaultData[1].text }}</span> -->
		        </li>
		        <li>
		           <p class="sDemand-details-num">供应商货号:</p>
				   <input class="sDemand-details-input" v-model="submitData.pcode" type="text" placeholder="请输入供货商货号">
		        </li>
		        <li>
		           <p class="sDemand-details-num">主&nbsp;&nbsp;&nbsp;推&nbsp;&nbsp;&nbsp;&nbsp;款:</p>
				   <div class="mui-input-row mui-radio sDemand-details-radio">
				       <input name="radioTui" type="radio" v-model="submitData.ismain" value="1">
				       <label>是</label>
				   </div>
				   <div class="mui-input-row mui-radio  sDemand-details-radio">
				       <input name="radioTui" type="radio"  v-model="submitData.ismain" value="0">
				       <label>否</label>
				   </div>
		        </li>
		        <li>
		           <!-- <p class="sDemand-details-num">合&nbsp;作&nbsp;方&nbsp;&nbsp;式:</p>
				   <div class="mui-input-row mui-checkbox sDemand-details-radio">
				       <label>试用</label>
				       <input name="Checkbox" type="checkbox" style="right: 3.2rem;" v-model="submitData.jyfs" value="1">
				   </div> -->
				   <p class="sDemand-details-num">合&nbsp;作&nbsp;方&nbsp;&nbsp;式:</p>
				   <div class="mui-input-row mui-radio sDemand-details-radio">
				       <input name="jyfs" type="radio" v-model="submitData.jyfs" value="1">
				       <label>试销</label>
				   </div>
				   <div class="mui-input-row mui-radio  sDemand-details-radio">
				       <input name="jyfs" type="radio"  v-model="submitData.jyfs" value="0">
				       <label>非试销</label>
				   </div>
		        </li>
				<li>
		           <p class="sDemand-details-num">审&nbsp;核&nbsp;状&nbsp;&nbsp;态:</p>
				   <div class="mui-input-row mui-checkbox sDemand-details-radio">
					   <label v-if="data.baseflag==2"><a @click="showCheck()">{{ data.baseflagtext }}</a></label>
				       <label v-else>{{ data.baseflagtext }}</label>
				   </div>
		        </li>
		        <li class="sDemand-details-upload-li-imgs">
		           <ul>
		           	    <li v-for="(img, index) in imgList" :key="index" @click="loadUpload(index)">
							<div class="img-div">
								<template v-show="img.url">
									<img :src="img.url">
								</template>
								<div class="title-div" v-show="!img.url">
									<!-- <div class="img-div-title">+</div> -->
									<div class="img-div-title">{{ img.title }}</div>
								</div>
							</div>
		           	   	</li>
		           </ul>
		        </li>
		    </ul>
		</div>
		<div class="sDemand-details-upload-sure sDemand-details-sure">
			<button id="sDemand-details-upload-again" type="button" class="mui-btn mui-btn-outlined" @click="save">保存</button>
			<button id="sDemand-details-upload-sure" type="button" class="mui-btn mui-btn-blue" @click="submit">提交</button>
		</div>

		 <div>
			<form id="editorImageForm" enctype="multipart/form-data" method="post" style="display: none">
				<div><input type="file" @change="upload" multiple ref="editFileInput" name="file" accept=".gif,.png,.jpg,.jpeg" /><br></div>
			</form>
		</div>
    </div>
	<mt-popup
        v-model="popupVisible"
        position = "left"
        popup-transition="popup-fade">
        <div class="popu-div">图片审核情况<i @click="popupVisible=false" class="icon iconfont icon-guanbi"></i></div>
        <div class="popu-body">
            <div class="audit-regula">
                <div class="audit-regula-cont">
                    <ul>
                        <li v-for="(item, index) in checkList" :key="index" v-if="item.checkflag==0">
                            <div class="mui-input-row mui-checkbox audit-details-box">
                                <label class="lab left">{{ item.checkinfo }}</label>
                                <label class="lab right">{{ item.reason }}</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </mt-popup>
    <cate-gory-pick
        :showPicker.sync="showPicker"
        :defaultData = "defaultData"
        @changeValue="changeValue"></cate-gory-pick>
</div>
</template>
<script>
import { mapState ,mapMutations } from 'vuex'
import { Popup } from 'mint-ui'
import commonHeader from '@/components/commonHeader.vue'
import API from '@/service/api'
import cateGoryPick from '@/components/cateGoryPick'
export default {
    components: { commonHeader, cateGoryPick },
    data() {
        return {
			title: '样衣图片上传',
			uploadIndex: 0,
			data: {},
			checkList: [],
			popupVisible: false,
            submitData: { id: null, ismain: '1', jyfs: '1', note: '', pcode: '', bandid: '', pic1: '', pic2: '', pic3: '' , pic4: '', pic5: ''},
            showPicker: false,
            defaultData: [{ text: '请选择', value: '-1' },{ text: '请选择', value: '-1' }],
			imgList: [
				{ title: '正面图', url: null, guid: '' }, 
				{ title: '背面图', url: null, guid: '' }, 
				{ title: '细节图', url: null, guid: '' }, 
				{ title: '效果图', url: null, guid: '' }, 
				{ title: '颜色图', url: null, guid: '' }, 
			]
        }
    },
    computed:{
        ...mapState( [ 'sample_id', 'sample_no', 'login_user' ] )
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        async initialization() {
			let submitData = await API.currency.getSampleDetail({ ID: this.sample_no })
			this.data = submitData
			this.submitData.id = submitData.id
			this.submitData.bandid = submitData.bandid
			this.submitData.pcode = submitData.pcode
			this.submitData.jyfs = submitData.jyfs
			let imgs = await API.currency.getSampleImgs({ sampleId: this.sample_id })
			this.imgList.forEach((img, index)=> {
				img.url = imgs[`simg${index+1}`]
				img.guid = imgs[`imgid${index+1}`]
			})
			this.UPDATE_SHOW_LOADING(false)
        },
        changeValue(value) {
            this.defaultData = value
        },
		loadUpload(index) {
			this.$refs.editFileInput.click()
			this.uploadIndex = index
		},
		showCheck() {
			this.popupVisible = true
			API.ckphoto.getSampleCheckList({sampleId: this.sample_id}).then(res=> {
				this.checkList = res
			})
		},
		check() {
			let flag = true
			if(!this.imgList[0].url){
				this.$error('请上传正面图！')
				flag =  false
				return flag
			}

			if(!this.submitData.pcode){
				this.$error('请输入供应商货号！')
				flag =  false
				return flag
			}
			return flag
		},
		save() {
			if(!this.check()) return
			this.UPDATE_SHOW_LOADING(true)
			this.submitData.pic1 = this.imgList[0].guid
			this.submitData.pic2 = this.imgList[1].guid
			this.submitData.pic3 = this.imgList[2].guid
			this.submitData.pic4 = this.imgList[3].guid
			this.submitData.pic5 = this.imgList[4].guid
			API.band.edit(this.submitData).then(res=>{
				if(res.code == '1'){
					this.$success()
					this.UPDATE_SHOW_LOADING(false)
				}else this.$error(res.errMsg)
			})
		},
		submit() {
			this.UPDATE_SHOW_LOADING(true)
			API.band.submit({id: this.data.id}).then(res=>{
				this.$success()
				this.UPDATE_SHOW_LOADING(false)
				setTimeout(()=>{
					this.$router.push( { name: 'apply' } )
				},1000)
			})
		},
		upload() {
			this.UPDATE_SHOW_LOADING(true)
			const files = this.$refs.editFileInput.files
			if(files.length==1) {
				const file = files[0]//获取文件表单中的文件对象
				this.imgUpload(file, this.uploadIndex)
			}else if(files.length>5) {
				this.$error("图片数量不能超过5张")
			}else {
				for(let k=0; k<files.length; k++) {
					const file = files[k]
					this.imgUpload(file, k)
				}
			}
			setTimeout(()=> {
                this.UPDATE_SHOW_LOADING(false)
            },1000)
		},
		imgUpload(file, index) {
			// let img = await 
			if(file.size>=2040000)
				return this.$error("请上传小于2M的图片！")
			else {
				API.currency.upload(file).then(res => {
					this.imgList[index].url = res.files[0].thumbnailUrl1
					this.imgList[index].guid = res.files[0].guid
				})
			}	
		},
    },
    created() {
       this.initialization()
    },
}
</script>
<style lang='less' scoped>
.sDemand-details-radio label{
	margin-top: -13px;
}
.img-div{
	position: relative;
    overflow: hidden;
	padding-bottom: 100%;/*重要属性*/
	.title-div{
		width: 100%;
		height: 100%;
		position: absolute;
		.img-div-title{
			width: 100%;
			font-size: 14px;
			height: 100%;
			justify-content:center;
			align-items:center; 
			display: -webkit-flex;
		}
	}
	img{
		width: 100%;
		height: 100%;
		position: absolute;
	}
}
.sDemand-details-upload-li-imgs{
	margin-bottom: 40px!important;
}
.mint-popup {
    width: 100%;
    height: 100%;
    .popu-div {
        text-align: center;
        font-size: 20px;
        margin: 5px 0;
        height: 20px;
        width: 100%;
        .icon-guanbi{
            position: fixed;
            right: 1px;
            top: -5px;
            margin: 0!important;
            padding: 0!important;
            font-size: 30px!important;
        }
    }
    .popu-body{
        margin-top: 60px;
        height: calc(100% - 80px);
        width: 100%;
        .lab{
            width: 49%;
            padding-right: 0px!important;
        }
        .right {
            text-align: right;
        }
    }
}
</style>